<template>
  <div class="app-container">
    <!-- <div class="notice">
      <h4>我的企业</h4>
      <span>产品需提供文案</span>
    </div> -->
    <div class="wrap">
      <!-- 11111 -->
      <el-row :gutter="20">
        <el-form ref="form" :model="form" :rules="rules" label-width="auto">
          <el-col :span="12" :gutter="20">
            <div  v-loading="infoLoading" class="wrapContent">
              <div class="alertMsg">
                <i class="el-icon-warning" />
                如果有企业信息，建议优先填写，系统会自动拉取，并填充信息！
              </div>
              <div class="wrapTit">基本信息</div>
              <el-form-item label="股票代码：" prop="code" class="input_line" @blur="tan()">
                <el-input v-model="form.stockCode" />
                <el-button
                  type="primary"
                  size="mini"
                  style="padding: 8px 15px; margin-left: 5px"
                  plain
                  @click="tan"
                >
                  获取企业信息
                </el-button>
              </el-form-item>
              <el-form-item label="股票简称：" prop="stockAbbreviation" class="input_line">
                <el-input v-model="form.stockAbbreviation" />
              </el-form-item>
              <el-form-item label="企业全称：" prop="enterpriseName" class="input_line">
                <el-input v-model="form.enterpriseName" />
              </el-form-item>
              <el-form-item label="法人代表：" prop="legalRepresentative" class="input_line">
                <el-input v-model="form.legalRepresentative" />
              </el-form-item>
              <el-form-item label="注册资本：" prop="registeredCapital" class="input_line">
                <el-input v-model="form.registeredCapital" />
              </el-form-item>
              <el-form-item label="成立日期：" prop="establishDate" class="input_line">
                <el-input v-model="form.establishDate" />
              </el-form-item>
              <el-form-item label="公司简介：" prop="companyProfile" class="input_line">
                <el-input v-model="form.companyProfile" type="textarea" :rows="4" />
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="12" :gutter="20">
            <div v-loading="infoLoading" class="wrapContent">
              <div class="wrapTit">其他信息</div>
              <el-form-item label="所在省市" class="input_line">
                <el-input v-model="form.provinceCity" suffix-icon="el-icon-location-information" />
              </el-form-item>
              <el-form-item label="总经理：" class="input_line">
                <el-input v-model="form.generalManager" />
              </el-form-item>
              <el-form-item label="董事会秘书：" class="input_line">
                <el-input v-model="form.boardSecretary" />
              </el-form-item>
              <el-form-item label="员工总数：" class="input_line">
                <el-input v-model="form.staffNumber" />
              </el-form-item>
              <el-form-item label="企业官网：" class="input_line">
                <el-input v-model="form.enterpriseWebsite" />
              </el-form-item>
              <el-form-item label="企业邮件：" class="input_line">
                <el-input v-model="form.enterpriseEmail" />
              </el-form-item>
              <el-form-item label="办公地址：" class="input_line">
                <el-input v-model="form.businessAddress" />
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="24" :gutter="20">
            <el-form-item class="btnClass">
              <el-button type="primary" size="small " @click="submitForm()">保存</el-button>
              <el-button size="small " @click="cancel()">取消</el-button>
              <!-- <el-button size="mini" @click="tan()">弹窗</el-button> -->
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
    </div>
    <el-dialog
      title="提示"
      :visible.sync="centerDialogVisible"
      class="upDialog"
      width="24%"
      height="100%"
      center
    >
      <div v-loading="listLoading">
        <el-row :gutter="20" class="tanList">
          <el-col :span="8">企业信息</el-col>
          <el-col :span="16" class="strRight">
            <el-button type="primary" plain size="mini" @click="copyData()">一键填入</el-button>
          </el-col>
          <el-col :span="8">股票代码</el-col>
          <el-col :span="16" class="strRight">{{ tanForm.stockCode }}</el-col>
          <el-col :span="8">股票简称</el-col>
          <el-col :span="16" class="strRight">
            {{ tanForm.stockAbbreviation }}
          </el-col>
          <el-col :span="8">企业全称</el-col>
          <el-col :span="16" class="strRight">
            {{ tanForm.enterpriseName }}
          </el-col>
          <el-col :span="8">这册资本</el-col>
          <el-col :span="16" class="strRight">
            {{ tanForm.registeredCapital }}
          </el-col>
          <el-col :span="8">法人代表</el-col>
          <el-col :span="16" class="strRight">
            {{ tanForm.legalRepresentative }}
          </el-col>
          <el-col :span="8">省份城市</el-col>
          <el-col :span="16" class="strRight">{{ tanForm.provinceCity }}</el-col>
          <el-col :span="8">总经理</el-col>
          <el-col :span="16" class="strRight">
            {{ tanForm.generalManager }}
          </el-col>
          <el-col :span="8">董事会秘书</el-col>
          <el-col :span="16" class="strRight">
            {{ tanForm.boardSecretary }}
          </el-col>
          <el-col :span="8">成立日期</el-col>
          <el-col :span="16" class="strRight">{{ tanForm.establishDate }}</el-col>
          <el-col :span="8">公司简介</el-col>
          <el-col :span="16" class="strRight">
            {{ tanForm.companyProfile }}
          </el-col>
          <el-col :span="8">总员工数</el-col>
          <el-col :span="16" class="strRight">{{ tanForm.staffNumber }}</el-col>
          <el-col :span="8">企业官网</el-col>
          <el-col :span="16" class="strRight">
            {{ tanForm.enterpriseWebsite }}
          </el-col>
          <el-col :span="8">企业邮箱</el-col>
          <el-col :span="16" class="strRight">
            {{ tanForm.enterpriseEmail }}
          </el-col>
          <el-col :span="8">办公地址</el-col>
          <el-col :span="16" class="strRight">
            {{ tanForm.businessAddress }}
          </el-col>
        </el-row>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import { SharesCode, sendUpData } from '@/api/Mycompany/index'
  export default {
    data() {
      return {
        list: [],
        infoLoading: true,
        listLoading: true,
        centerDialogVisible: false,
        form: {
          stockCode: '',
        },
        tanForm: {

        },
        record: '',
        rules: {
          fullname: [{ required: true, message: '企业全称不能为空！', trigger: 'blur' }],
          person: [{ required: true, message: '法人代表不能为空！', trigger: 'blur' }],
          money: [{ required: true, message: '注册资本不能为空！', trigger: 'blur' }],
          setdate: [{ required: true, message: '成立日期不能为空！', trigger: 'blur' }],
          introduce: [{ required: true, message: '公司简介不能为空！', trigger: 'blur' }],
        },
      }
    },
    watch: {
      $router(to, from) {
        // 对路由变化作出响应...
        console.log('upto', to)
        console.log('upfrom', from)
      }
    },
    created() {
      this.form.stockCode = this.$route.query.stockCode
      this.getInfo()
    },
    mounted() {
    },
    methods: {
      // 默认获取当前企业信息
      getInfo() {
        if (!this.$route.query.stockCode) {
          this.$message({
            showClose: true,
            message: '参数错误！',
            type: 'error'
          })
          this.$router.push({ path: '/maintain/company' })
          return
        }
        // location.replace(location.href)
        console.log(this.$route.query.stockCode)
        SharesCode({ stockCode: this.$route.query.stockCode }).then(response => {
          if (response) {
            this.form = response
            this.infoLoading = false
          } else {
            this.infoLoading = true
            this.$message({
              showClose: true,
              message: '没获取到数据',
              type: 'error'
            })
          }
        })
      },
      // 获取当前查询企业数据
      tan() {
        this.form = { stockCode: this.form.stockCode }
        this.centerDialogVisible = true
        this.listLoading = true
        SharesCode(this.form).then(response => {
          if (response) {
            this.tanForm = response
            this.listLoading = false
          } else {
            this.centerDialogVisible = false
            this.$message({
              showClose: true,
              message: '没获取到数据',
              type: 'warning'
            })
          }
        })
      },
      // 一键填入按钮
      copyData() {
        this.centerDialogVisible = false
        this.form = this.tanForm
      },
      // 提交内容
      submitForm() {
        sendUpData({ ...this.form }).then(response => {
          this.tanForm = response
          this.$router.push({ path: '/maintain/company' })
        })
      },
      // 取消按钮
      cancel() {
        this.$router.push({ path: '/maintain/company' })
      },
    },
  }
</script>

<style lang="scss">
  .upDialog {
    .el-dialog {
      position: absolute;
      right: 0;
      left: auto;
      height: 96vh;
      margin: 2vh 0 !important;
      .el-dialog__header {
        display: none;
      }
      .strRight {
        text-align: right;
      }
    }
  }
</style>

<style lang="scss" scoped>
  .tanList {
    line-height: 32px;
    height: 92vh;
    overflow: auto;
  }

  .btnClass {
    width: 100%;
    margin-top: 25px;
    text-align: center;

    .el-button--primary {
      color: #fff;
      background: #404041;
      border: none;
    }

    .el-button--primary:hover {
      color: #fff;
      background: #666;
      border: none;
    }

    .el-form-item__content {
      margin-left: 0 !important;
    }
  }

  .notice {
    padding: 5px 25px 15px;
    margin: 0 0 25px 0;
    background: #fff;
    border: 1px solid #ebeef5;
    border-radius: 4px;
  }

  .main-container {
    background: #f3f4f8;
  }

  .wrap {
    padding: 25px;
    background: #fff;
    border-radius: 4px;

    .el-alert {
      margin-bottom: 15px !important;
    }

    .wrapTit {
      margin: 20px 0;
      font-size: 20px;
      font-weight: 600;
      text-align: center;
    }

    .wrapContent {
      position: relative;
      width: 100%;
      min-height: 620px;
      padding: 15px;
      font-size: 14px;
      line-height: 36px;
      color: #363636;
      border: 1px solid #aeaeae;
      border-radius: 8px;

      .alertMsg {
        position: absolute;
        top: 0;
        left: 20px;
        font-size: 12px;
        font-weight: 600;
        color: #d12f1f;

        i {
          margin-right: 8px;
          font-size: 14px;
        }
      }

      .input_line {
        width: 60%;
        margin: 0 auto 22px;
        line-height: 36px;

        .el-form-item__label {
          line-height: 32px;
        }

        .el-input {
          width: 220px;

          .el-input__inner {
            width: 220px;
          }
        }

        .el-input__inner {
          height: 32px;
          line-height: 32px;
        }
      }

      .strLeft {
        text-align: left;

        h4 {
          padding: 0;
          margin: 0;
        }
      }

      .strRight {
        text-align: right;
      }
    }
  }

  .notice h4 {
    font-weight: 700;
    color: #666;
  }

  .notice span {
    font-size: 14px;
    color: #666;
  }

  .app-container {
    height: auto;
    padding: 0;
    background: #f3f4f8;
  }
</style>
